<template>
    <div id="ol-popup" class="ol-popup">
        <!-- max-height="300px" -->
        <el-card style="max-width: 480px" >
            <el-descriptions title="事件详细信息" class="margin-top" border :column="1">
                <template #extra>
                    <el-button type="primary" :icon="Close" @click="handleClose"></el-button>
                </template>
                <el-descriptions-item v-for="(key, value) in selectData" :key="key" :label="value">{{ key
                    }}</el-descriptions-item>
            </el-descriptions>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { useCommonStore } from '@/stores/common'
import { storeToRefs } from 'pinia'
/* 引入公共状态管理对象 */
const store = useCommonStore()
const { InputFlag } = storeToRefs(store)
const props = defineProps({
    selectData: {
        type: Object,
        default: () => ({})
    }
})
const handleClose = () => {
    InputFlag.value = false
}
</script>

<style scoped>

.ol-popup:after,
.ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 50%;
    transform: translateX(-50%);
}
</style>